<template>
  <div>

      <mh></mh>

    <main class="" id="main-collapse">
      <div>
      
      
        <!--面包屑导航 通过：进行传参操作-->
        <bread :datas='this.datas'></bread>

        <br /><br />
       
        {{ msglist }}
        
      </div>
    
    </main>

  </div>
</template>

 
<script>


import mh from './mh.vue'
//导入面包屑导航组件
import bread from './bread.vue'

export default {
  data () {
    return {
      msg: "这是一个变量",
      //面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'我的客服'}],
      //数据
      datalist:[],
      // 聊天列表
      msglist:[]
      
    }
    },
    components: {
        'mh':mh,
        //声明标签
        'bread':bread
    },
    mounted:function(){
        // 建立持久化websocket链接
        var _this = this;
        // 判断当前浏览器是否支持websocket协议
        if ("websocket" in window) {
            console.log("支持")
            // 建立连接
            var ws = new WebSocket("ws://localhost:8000/websocket_link/")
            // 发送连接信息
            ws.onopen = function(){
                // 发送测试信息
                ws.send("test")
            };
            // 监听消息
            ws.onmessage = function(evt){
                // 获取监听到的消息
                var mymsg = evt.data;
                // alert(mymsg);
                // 消息赋值
                _this.msglist,push(mymsg);
            };
            // 关闭连接
            ws.onclose = function(){
                console.log("websocket链接已经关闭")
            }

        }else{
            console.log("不支持")
        }


    },
    methods:{

    

    
    }
}


</script>
 
<style>



</style>